<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增仓库信息')" />
    <th:block th:include="include :: businessCSS" />
    <style type="text/css">
        .getMore_c{top:13px !important;right: 5px !important;}
        .getMore_m{top:13px !important;right: 5px !important;}
        .getMore_s{top:13px !important;right: 5px !important;}
        .getMore_f{top:13px !important;right: 5px !important;}
        .preservationBtn{padding: 10px;text-align: center;}
        .preservationBtn input{font-size: 16px;background-color: rgb(80, 138, 238);color: #fff;border: none;padding: 5px 30px;border-radius: 10px;cursor: pointer;}
    </style>
</head>
<body>
<div class="main-container" id="main-container">
    <div class="main-content">
    <form class="layui-form head-form">
        <input type="hidden" id="guid" name="guid"  th:value="${depotInfo?.guid}">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item margin_t0">
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>仓库编码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="depotId" id="depotId" lay-verify="depotId|required" th:value="${depotInfo?.depotId}" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>仓库名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="depotName" id="depotName" lay-verify="depotName|required" th:value="${depotInfo?.depotName}" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label">所属公司：</label>
                    <div class="layui-input-block">
                        <input type="text" name="cid" id="cid" th:value="${depotInfo?.cid}" autocomplete="off" placeholder="请选择" class="layui-input getMore_c" readonly>
                        <i class="layui-icon layui-icon-more getMore_c"></i>
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label">仓库管理者：</label>
                    <div class="layui-input-block">
                        <input type="text" name="managers" id="managers" th:value="${depotInfo?.managers}" autocomplete="off" placeholder="请选择" class="layui-input getMore_m" readonly>
                        <i class="layui-icon layui-icon-more getMore_m"></i>
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>物流服务商：</label>
                    <div class="layui-input-block">
                        <input type="text" name="codeLogsticsServer" lay-verify="codeLogsticsServer|required" id="codeLogsticsServer" th:value="${depotInfo?.codeLogsticsServer}" autocomplete="off" placeholder="请选择" class="layui-input getMore_s" readonly>
                        <i class="layui-icon layui-icon-more getMore_s"></i>
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>服务商名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="nameLogsticsServer" id="nameLogsticsServer" lay-verify="nameLogsticsServer|required" th:value="${depotInfo?.nameLogsticsServer}" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>免收渠道：</label>
                    <div class="layui-input-block">
                        <input type="text" name="freeChannel" id="freeChannel" lay-verify="freeChannel|required" th:value="${depotInfo?.freeChannel}" autocomplete="off" placeholder="请输入" class="layui-input getMore_f">
                        <i class="layui-icon layui-icon-more getMore_f"></i>
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label"><font class="f_red">*</font>入库费用标准：</label>
                    <div class="layui-input-block">
                        <input type="number" name="warehousingCharge" id="warehousingCharge" lay-verify="warehousingCharge|required" th:value="${depotInfo?.warehousingCharge}" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm4'">
                    <label class="layui-form-label">启用状态：</label>
                    <div class="layui-input-block">
                        <input type="checkbox"   name="deleted" lay-skin="switch" th:lay-text="'启用|禁用'" th:value="${depotInfo?.deleted}" checked >
                    </div>
                </div>
                <div th:class="'layui-inline margin_r0 layui-col-sm8'">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <textarea id="remark" name="remark" class="layui-textarea" placeholder="请输入内容" th:text="${depotInfo?.remark}"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <!-- 明细特殊模板自生成 -->
        <div>
            <table class="layui-hide" id="jzdhtable" lay-filter="jztable"></table>
            <script type="text/html" id="jztoolbar">
                <div style="padding: 16px;display: flex;justify-content: space-between;">
                    <div style="font-weight: 700;font-size: 18px;">仓储费梯度(方)</div>
                    <div>
                        <button class="layui-btn layui-btn-normal dhicon" th:classappend="${enableEdit} == 1 ?'':'layui-btn-disabled'" type="button" th:disabled="${enableEdit} == 1 ?false:true" lay-event="addbtn" id="btn-sh">新增</button>
                        <button class="layui-btn layui-btn-danger dhicon" th:classappend="${enableEdit} == 1 ?'':'layui-btn-disabled'" type="button" th:disabled="${enableEdit} == 1 ?false:true" lay-event="mjbtn_save" id="btn-sh">删除</button>
                    </div>
                </div>
            </script>
        </div>
        <div class="layui-form-item preservationBtn">
            <input type="button" lay-submit lay-filter="btn-add" id="btn-add" value="保存">
        </div>
    </form>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<script th:inline="javascript">
    /*<![CDATA[*/
    var prefix = ctx + "system/depot",
    	prefix2 = ctx + "base/company",
    	prefix3 = ctx + "base/logsticsserver",
    	prefix4 = ctx + "hr/operatecompanyapply",
		fields = [[${fields}]];
    /*]]>*/
</script>
<script th:inline="javascript">
var gridColumnsJZ = [[${gridColumnsJZ}]];
var logisticsMmodeGradList = [[${logisticsMmodeGradList}]];
var listData3=logisticsMmodeGradList ?logisticsMmodeGradList:[]
var $,layer,form,table;
layui.use(['table','form','layer','jquery'], function () {
    $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table;
    $.each(fields,function(i,v){
    	if(v.fieldFrontRequired){//如果字段是必填字段，则加上红*并添加必填验证
    		$("#"+v.fields).parent().prev().html('<font class="f_red">*</font>'+v.fieldName+'：');
    		$("#"+v.fields).attr('lay-verify','required');
    	}
    })
    form.verify({
        codeLogsticsServer: function(value){
            if(value.length == 0){
                return '物流服务商不能为空';
            }
        },
        depotId: function(value){
            if(value.length == 0){
                return '仓库编码为空';
            }
        },
        depotName: function(value){
            if(value.length == 0){
                return '仓库名称为空';
            }
        },
        freeChannel: function(value){
            if(value.length == 0){
                return '免收渠道为空';
            }
        },
        warehousingCharge: function(value){
            if(value.length == 0){
                return '入库费用标准为空';
            }
        },
        nameLogsticsServer: function(value){
            if(value.length == 0){
                return '服务商名称为空';
            }
        }
    });

    form.on('submit(btn-add)', function(data){
        if ($("input:checkbox:checked").val() == undefined){
            data.field.deleted = 1
        }else {
            data.field.deleted = 0
        }
        var is_return = false//是否中断保存
        if(is_return) return;
        $.modal.loading("正在处理中，请稍后...");
        if($('#guid').val()=='') {//通过判断guid是否存在来判断是新增还是保存
            var url = '/system/depot/addpost';
        }else {
            var url = '/system/depot/editpost';
        }
        $.post(url,{depotInfoItems:JSON.stringify(data.field),infoItems:JSON.stringify(listData3)},function(res){
            $.modal.closeLoading()
            layer.msg(res.msg);
            if (res.code == 0){
                setTimeout(function(){
                    window.location.href = '/system/depot/edit?guid=' + res.data;
                }, 1000);
            }
        });
        return false;
    });

    $.tablelist.init({
        elem: '#jzdhtable'
        , data: listData3
        , page: false
        , even: true
        , limit: 10000
        , totalRow: gridColumnsJZ.totalRow
        , cols: [gridColumnsJZ.gridBody]
        , toolbar: '#jztoolbar'
        , height: '300'
        , done: function (res, curr, count) {
            listData3 = table.cache.jzdhtable;//每次重载都赋值更新表缓存
        }
    });

    let b = 0;
    //头工具栏事件
    table.on('toolbar(jztable)', function (obj) {
        switch (obj.event) {
            case 'addbtn':
                gridColumnsJZ.gridNewLine.guid = b++;
                listData3.push(gridColumnsJZ.gridNewLine);
                table.reload('jzdhtable', {data :listData3});
                break;
            case 'mjbtn_save':
                var objdata=table.checkStatus('jzdhtable')
                objdata=objdata.data
                listData3= table.cache.jzdhtable;
                if(objdata.length>0){
                    objdata.forEach(item => {
                        listData3 = listData3.filter(items => items.guid!= item.guid);
                    });
                    table.reload('jzdhtable', {data:listData3});
                }else{
                    layer.msg("请选择数据");
                }
                break;
        };
    });

    //监听单元格编辑
    table.on('edit(jztable)', function(obj) {
        fxa = true;
        //判断是否数值匹配
        listData3.map((n,m)=> {
            if (obj.field == 'startSection') {
                name = "开始值";
            }
            if (obj.field == 'endSection') {
                name = "结束值";
            }
            if (obj.field == 'kg') {
                name = "数值(days/方)";
            }
            if(n.guid == obj.data.guid){
                if (!$.isNumeric(obj.value)){
                    n[obj.field] = "";
                    layer.msg(name + "只允许输入数值不超过2位小数点,请核实后在操作!")
                    fxa = false;
                    return
                }
            }

        })
        if (!fxa) {
            table.reload('jzdhtable', {data: listData3});
        }

    })
});

//点击打开公司选择页
$('.getMore_c').on('click', function () {
	$.modal.open("公司选择", prefix2+"/select", 1136, 693, function(index){
        var res = window["layui-layer-iframe" + index].callbackdata();
        if(res=="none"){
        	layer.msg("请选择！");
        }else{
            $("#cid").val(res.vId);
            layer.close(index); 
        }
    });
});

//点击打开选择页
$('.getMore_s').on('click', function () {
	$.modal.open("物流服务商选择", prefix3+"/select", 1136, 693, function(index){
        var res = window["layui-layer-iframe" + index].callbackdata();
        if(res=="none"){
        	layer.msg("请选择！");
        }else{
            $("#codeLogsticsServer").val(res.code);
            $("#nameLogsticsServer").val(res.name);
            layer.close(index);
        }
    });
});
//点击打开员工选择页
$('.getMore_m').on('click', function () {
	var userlist=$('#managers').val().replace(/\[|]/g,'');
	$.modal.open('仓库管理者选择','/system/user/userselect?pagetype=checkbox&selectedUser='+userlist,'1136','693',function(index){
        var res = window["layui-layer-iframe" + index].callbackdata();
        if(res.length > 0){
        	userlist='';
        	$.each(res,function(i,v){
        		userlist+='[' + res[i]['userId'] + '],';
        	})
        	userlist=userlist.substring(0,userlist.length-1);
        	$('#managers').val(userlist);
        	layer.close(index);
        }else{
            layer.msg("请选择人员！");
        }
    });
});

//点击打开物流服务商选择页
$('.getMore_f').on('click', function () {
    var gslist=$('#freeChannel').val().replace(/\[|]/g,'');
    layer.open({
        type: 2,
        area: [($(window).width() - 200) + 'px', ($(window).height() - 100) + 'px'],
        fix: false,//不固定
        offset: '10%',//距离顶部
        maxmin: true,//最大最小化
        shade: 0.3,//遮罩
        title: '物流渠道列表',
        content: "/hr/operatecompanyapply/ocselect?pagetype=checkbox"+ "&selectedUser=" + gslist,
        btn: ['确定', '取消'],
        shadeClose: true,// 弹层外区域关闭
        yes: function (index, layero) {
                console.log("index", index);
                var res = window["layui-layer-iframe" + index].callbackdata();
                console.log("res", res);
                if(res.length > 0){
                    gslist='';
                    $.each(res,function(i,v){
                        gslist+= res[i]['vGsBm'] + ',';
                    })
                    gslist=gslist.substring(0,gslist.length-1);
                    $('#freeChannel').val(gslist);
                    layer.close(index);
                }else{
                    layer.msg("请选择免收渠道！");
                }
        }
    });

});

</script>
</body>
</html>
